<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
<script src="https:d3js.org/d3.v3.min.js"></script>
</head>
<style>
body,
html{
  margin:0;
  padding:0;
  width:100%;
  height:100%
}
</style>
<body>
<script>
  var nodes = [ { name: "桂林" }, { name: "广州" },
              { name: "厦门" }, { name: "杭州" },
              { name: "上海" }, { name: "青岛" },
              { name: "天津" } ];

 var edges = [ { source : 0 , target: 1 } , { source : 0 , target: 2 } ,
               { source : 0 , target: 3 } , { source : 1 , target: 4 } ,
               { source : 1 , target: 5 } , { source : 1 , target: 6 } ];
  var svg = d3.select('body').append('svg')
    .attr('width',1000)
    .attr('height',1000)
    .attr('transform','translate('+300+','+0+')')

  var force =d3.layout.force()
  .nodes(nodes)//指定节点数组
  .links(edges)//指定连接数组
  .size([600,600])//指定作用域范围
  .linkDistance(150)//指定连线长度
  .charge([-400])//相互之间的作用力

  force.start();//开始作用

  //添加连线
  var svg_edges = svg.selectAll('line')
    .data(edges)
    .enter()
    .append('line')
    .style('stroke','#ccc')
    .style('stroke-width',1)

 var color = d3.scale.category20()
 var svg_nodes = svg.selectAll('circle')
    .data(nodes)
    .enter()
    .append('circle')
    .attr('r',20)

var color = d3.scale.category20();

 //添加节点 
 var svg_nodes = svg.selectAll("circle")
     .data(nodes)
     .enter()
     .append("circle")
     .attr("r",20)
     .style("fill",function(d,i){
         return color(i);
     })
     .call(force.drag);  //使得节点能够拖动

 //添加描述节点的文字
 var svg_texts = svg.selectAll("text")
     .data(nodes)
     .enter()
     .append("text")
     .style("fill", "black")
     .attr("dx", 20)
     .attr("dy", 8)
     .text(function(d){
        return d.name;
     });

 force.on("tick", function(){ //对于每一个时间间隔
    //更新连线坐标
    svg_edges.attr("x1",function(d){ return d.source.x; })
        .attr("y1",function(d){ return d.source.y; })
        .attr("x2",function(d){ return d.target.x; })
        .attr("y2",function(d){ return d.target.y; });

    //更新节点坐标
    svg_nodes.attr("cx",function(d){ return d.x; })
        .attr("cy",function(d){ return d.y; });

    //更新文字坐标
    svg_texts.attr("x", function(d){ return d.x; })
       .attr("y", function(d){ return d.y; });
 });
 
</script>	
</body>
</html>